<!--
 * @Description: 
 * @Author: xuechengwu
 * @Email: 516385822@qq.com
 * @Date: 2021-11-20 15:49:20
 * @LastEditTime: 2022-02-11 17:24:15
 * @LastEditors: xuechengwu
-->
<template>
  <div class="editor-wrapper" ref="editor">
      <template v-for="item in components">
          <vdr
            :key="item.mark"
            :config="item"
            :parents="[]"
            @droped="childDropped"
            @sorted="childSorted"
            :currentMark="currentComponent"
            @selected="onSelect"
            @click="onSelect"
            :is-edit="true"
            :values="curPage.values"
            :datas="curPage.datas"
            :page="curPage"
          >
          </vdr>
      </template>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import { mapGetters } from 'vuex';
export default {
    mounted() {
        new Sortable(this.$refs.editor, {
            onEnd: (evt) => {
                const { newIndex, oldIndex } = evt;
                this.$store.commit('SORT_COMPONENT', { parent: [], newIndex, oldIndex });
            }
        });
        this.$refs.editor.addEventListener('drop', () => {
            const { payload, layout = [] } = this.$store.state;
            if (payload === 'layout') {
                const mark = new Date().getTime() + Math.random() * 1000;
                console.log('layout==>', layout);
                this.$store.commit('ADD_COMPONENT', {
                    mark,
                    parent: [],
                    name: 'xue-row',
                    data: {},
                    style: {},
                    isContainer: true,
                    display: 'block',
                    links: [],
                    components: layout.map(vo => ({
                        mark: new Date().getTime() + 10000 * Math.random(),
                        parent: [mark],
                        name: 'xue-col',
                        data: { span: vo },
                        style: {},
                        isContainer: true,
                        display: 'inline-block',
                        links: [],
                    })),
                });
            } else {
                const config = window.A5.getComponent(payload);
                if (config) {
                    this.$store.commit('ADD_COMPONENT', {
                        parent: [],
                        name: config.name,
                        data: config.config.getProps(),
                        style: config.config.style,
                        isContainer: config.config.isContainer,
                        display: config.config.display,
                        links: [],
                    });    
                }
            }
            this.$store.commit('SET_PAYLOAD', '');
            
            
        });
        this.$refs.editor.addEventListener('dragover', (e) => {
            e.preventDefault();
        });
        this.$refs.editor.addEventListener('dragenter', (e) => {
            e.preventDefault();
        });
        this.$refs.editor.addEventListener('click', (e) => {
            e.stopPropagation();
            const { path = [] } = e;
            for (let i = 0; i < path.length; i++) {
                const dom = path[i];
                console.log('class list===>', dom.classList);
                const hasVdr = dom.classList.contains('vdr');
                if (hasVdr) {
                    const mark = dom.dataset.mark;
                    const parentStr = dom.dataset.parents || '';
                    let parents = [];
                    if (parentStr !== '') {
                        parents = parentStr.split(',');
                    }
                    this.$store.commit('SWITCH_COMPONENT', { mark, parents })
                    break;
                }
            }
        });
    },
    methods: {
        childDropped(parent) {
            const { payload, layout = [] } = this.$store.state;
            if (payload === 'layout') {
                const mark = new Date().getTime() + Math.random() * 1000;
                this.$store.commit('ADD_COMPONENT', {
                    mark,
                    parent: [],
                    name: 'xue-row',
                    data: {},
                    style: {},
                    isContainer: true,
                    display: 'block',
                    links: [],
                    components: layout.map(vo => ({
                        mark: new Date().getTime() + 10000 * Math.random(),
                        parent: [mark],
                        name: 'xue-col',
                        data: { span: vo },
                        style: {},
                        isContainer: true,
                        display: 'inline-block',
                        links: [],
                    })),
                });
            } else {
                const config = window.A5.getComponent(payload);
                if (config) {
                    this.$store.commit('ADD_COMPONENT', {
                        parent,
                        name: config.name,
                        data: config.config.getProps(),
                        style: config.config.style,
                        isContainer: config.config.isContainer,
                        links: [],
                    });
                }
            }
            this.$store.commit('SET_PAYLOAD', '');
            
        },
        childSorted(data) {
            const { parent = [], newIndex, oldIndex } = data;
            this.$store.commit('SORT_COMPONENT', { parent, newIndex, oldIndex });
        },
        onSelect(data) {
            console.log('on selected');
            const { parents, mark } = data;
            this.$store.commit('SWITCH_COMPONENT', { parents, mark });
        },
    },
    computed: {
        ...mapGetters(['curPage']),
        components() {
            const { containers, currentPage } = this.$store.state;
            const current = containers.find(vo => vo.mark === currentPage);
            if (current) {
                return current.components;
            }
            return [];
        },
        currentComponent() {
            const { containers, currentPage } = this.$store.state;
            const current = containers.find(vo => vo.mark === currentPage);
            if (current) {
                return current.currentComponent;
            }
            return '';
        }
    }
}
</script>

<style lang="less" scoped>
.editor-wrapper {
    display: inline-block;
    width: 375px;
    height: 667px;
    overflow: auto;
    position: relative;
    &::-webkit-scrollbar {
        display: none;
    }
}
</style>